<template>
	<view>
		<view class="tabs">
			<u-tabs
				:list="list1"
				lineColor="#4BC264"
				@change="change"
				:current="current"
				:activeStyle="{
					color: '#1C274C',
					fontWeight: 'bold',
					transform: 'scale(1.02)'
				}"
				:inactiveStyle="{
					color: '#A4A9B7',
					transform: 'scale(1)'
				}"
				itemStyle="padding-left: 25px; padding-right: 25px; height: 42px;"
			></u-tabs>
		</view>

		<view class="order-box">
			<view class="order-each" v-for="i in itemList" @click="$authTo('/pages/underway/underway')">
				<view class="each-name">
					<view class="name">店铺名·24H自助台球(红旗路店)</view>
					<view class="state">使用中</view>
				</view>
				<view class="explain-text">桌 台：台球桌 6号桌</view>
				<view class="explain-text">开台时间：2024-04-02 15:00:00</view>
				<view class="wire z-margin-tb-24"></view>
				<view class="duration">
					<view class="duration-l">
						40分钟
						<text>￥30</text>
					</view>
					<view class="order-btn">去支付</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list1: [
				{
					name: '全部'
				},
				{
					name: '使用中'
				},
				{
					name: '待付款'
				},
				{
					name: '已完成'
				}
			],
			current: 0,
			itemList: 10,
			page: 1,
			status: 'loadmore',
			flag: false
		};
	},
	onReachBottom() {
		//避免多次触发
		if (this.status == 'loading' || this.status == 'nomore') {
			return;
		}
		this.status = 'loading';
		this.getList();
	},
	methods: {
		getList() {
			this.flag = false;
			this.status = 'loading';
			setTimeout(() => {
				// this.itemList = this.itemList.concat(res.data);
				if (this.itemList == 30) {
					this.status = 'nomore';
				} else {
					this.itemList += 10;
					this.status = 'loadmore';
				}
				this.flag = true;
				uni.stopPullDownRefresh();
			}, 1000);
		},
		change(e) {
			console.log(e);
			this.current = e.index;
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f8fa;
}
.tabs {
	padding: 0 32rpx;
	display: flex;
	justify-content: center;
}

.order-box {
	.order-each {
		width: 622rpx;
		// height: 292rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		margin-top: 24rpx;
		padding: 32rpx;
		.each-name {
			display: flex;
			justify-content: space-between;
			.name {
				font-weight: bold;
				font-size: 26rpx;
				color: #1c274c;
				padding-bottom: 12rpx;
			}
			.state {
				font-weight: 500;
				font-size: 22rpx;
				color: #4bc264;
			}
		}
		.explain-text {
			font-weight: 500;
			font-size: 24rpx;
			color: #6b738b;
			margin-top: 16rpx;
		}
		.wire {
			width: 686rpx;
			height: 1rpx;
			background-color: #f2f3f5;
		}
		.duration {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.duration-l {
				font-weight: bold;
				font-size: 28rpx;
				color: #1c274c;
				text {
					color: #ff7b18;
					padding-left: 20rpx;
				}
			}
			.order-btn {
				width: 144rpx;
				height: 56rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 1rpx solid #4bc264;
				font-weight: 500;
				font-size: 26rpx;
				color: #4bc264;
				line-height: 56rpx;
				text-align: center;
			}
		}
	}
}
</style>
